<template>
	<!--选择上门时间 弹窗  str -->
	<uni-popup ref="showTimepopup" :safe-area="false" type="bottom" :mask-click="false">
		<view class="popup-time">
			<view class="lable_top">
				选择预约时间
				<uni-icons class="icon" color="#aaa" @click="closePopup()" size="22" type="closeempty"></uni-icons>
			</view>
			<view class="bodyer_time">
				<view class="bodyer-left">
					<view v-for="(item,index) in TimeDateList" :key="index" class="left-item"
						:class="chackDateIndex==index?'active_item':''" @click="chackDate(item,index)">
						<text>{{item.text}}</text>
					</view>
				</view>
				<!-- :class="`${chackDateTimeIndex==index?'active_item':''}`" -->
				<view class="">
					<scroll-view class="bodyer-rigth" scroll-y="true" :scroll-into-view="tabCurrent">
						<view v-for="(item,index) in timeList" :key="index" :id="`id${index}`">
							<!-- 可以点击选择 -->
							<p class="left-item" v-if="isSelective(item)" @click="chackDateTime(item,index)">{{item}}
							</p>
							<p class="left-item" :class="`${!isSelective(item)?'is-show':''}`" v-else>{{item}}</p>
						</view>
					</scroll-view>
				</view>

			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import {
		ref, toRefs, watch, onMounted, nextTick
	} from "vue";
	import apiOrder from "@/util/network_api/apiOrder.js"
	import apiLogin from "../../util/network_api/login";
	// import store from '@/store/index.js'
	const chackDateIndex = ref(0)//选中的日期下标
	const chackDateTimeIndex = ref(null)//选中的日期时间下标
	const showTimepopup = ref(null) //选择上门时间 弹窗
	const timeList = ref(['00:00~02:00', '02:00~04:00', '04:00~06:00', '06:00~08:00', '08:00~10:00', '10:00~12:00', '12:00~14:00', '14:00~16:00', '16:00~18:00', '18:00~20:00', '20:00~22:00', '22:00~24:00'])
	const TimeDateList = ref([])//日期列表
	const dateVal = ref(null)
	const time = ref('')
	const props = defineProps({
		//子组件接收父组件传递过来的值
		showpopup: Boolean,
		workId: String,
		setTimeObj: Object
	})
	// const scrollRef=ref()
	//使用父组件传递过来的值
	const { showpopup, workId, setTimeObj } = toRefs(props)
	const emit = defineEmits(['set-popup', 'value-change'])
	const closePopup = () => {
		showTimepopup.value.close()
		emit('set-popup', false)
	}

	const openPopup = () => {
		showTimepopup.value.open()
		emit('set-popup', true)
	}
	watch(showpopup, (n) => {
		if (n) {
			openPopup()
			getTimeDateList()

		} else {
			tabCurrent.value = 'id0'
			closePopup()
		}
	})
	const tabCurrent = ref('id0')
	//获取时间日期
	const getTimeDateList = () => {
		let today = new Date()
		let weeks = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
		TimeDateList.value = []
		for (var i = 0; i <= 4; i++) {
			let date = new Date(today.getTime() + i * 24 * 60 * 60 * 1000);
			var year = date.getFullYear()
			var month = date.getMonth() + 1
			var day = date.getDate()
			var nowWeek = weeks[date.getDay()];
			let tmp = ''
			if (i == 0) {
				tmp = '今天(' + nowWeek + ')'
			} else if (i == 1) {
				tmp = '明天(' + nowWeek + ')'
			} else {
				tmp = month + '月' + day + '日' + '(' + nowWeek + ')'
			}
			TimeDateList.value.push({ text: tmp, date: year + '-' + month + '-' + day })
		}
		let indexItem = timeList.value.findIndex(o => {
			return isSelective(o)
		})
		nextTick(() => {
			tabCurrent.value = `id${indexItem}`
		})
	}
	// 选中的日期
	const chackDate = (item, index) => {
		chackDateIndex.value = index
		dateVal.value = TimeDateList.value[chackDateIndex.value]
		chackDateTimeIndex.value = null
		time.value = ''

	}
	// 选中的日期时间
	const chackDateTime = (item, index) => {
		chackDateTimeIndex.value = index
		time.value = timeList.value[chackDateTimeIndex.value]
		dateVal.value = TimeDateList.value[chackDateIndex.value]
		emit('value-change', { dateVal: dateVal.value, time: time.value, chackDateIndex: chackDateIndex.value, chackDateTimeIndex: chackDateTimeIndex.value })
		closePopup()
		chackDateTimeIndex.value = null
		time.value = ''
	}
	// 判断时间段是否可选
	const isSelective = (item) => {
		let isH = item.split('~')[0].split(':')[0]//14
		let isEnd = item.split('~')[1].split(':')[0]//16
		let today = new Date()
		var hh = today.getHours()
		if (!setTimeObj.value) {
			return false
		}
		if (setTimeObj.value && setTimeObj.value.reservationTimeType == 2) {
			if (chackDateIndex.value == 0) {
				if (hh <= isEnd) {
					return true
				} else {
					if (hh >= 24) {
						chackDateIndex.value = 1
					}
					return false
				}
			} else {
				return true
			}
		} else {
			let setStart = setTimeObj.value.reservationStartTime.split(':')[1]
			let setEnd = setTimeObj.value.reservationEndTime.split(':')[0] == 0 ? 24 : setTimeObj.value.reservationEndTime.split(':')[0]
			if (chackDateIndex.value == 0) {
				if (hh <= isH) {
					if (setStart < isH && setEnd >= isEnd) {
						return true
					} else {
						return false
					}
				} else {
					if (hh >= setEnd && isEnd >= setEnd) {
						chackDateIndex.value = 1
					}
					return false
				}
			} else {
				if (isH > setStart && setEnd >= isEnd) {
					return true
				} else {
					return false
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup-time {
		background-color: #fff;
		height: 660rpx;
		border-radius: 40rpx 40rpx 0 0;
		width: 100%;
		position: relative;
		overflow-y: auto;

		::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
			display: none;
		}

		.lable_top {
			text-align: center;
			line-height: 100rpx;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
			height: 100rpx;
			border-bottom: 1rpx solid #eee;

			.icon {
				position: absolute;
				right: 40rpx;
			}
		}

		.bodyer_time {
			display: flex;
			height: calc(100% - 102rpx);

			.bodyer-left {
				background-color: #eee;

				.left-item {
					padding: 20rpx;
				}

				.active_item {
					background-color: #fff;
					color: #007cff;
				}

			}

			.bodyer-rigth {
				height: 100%;
				padding-bottom: 60rpx;
				box-sizing: border-box;

				:deep(.uni-scroll-view) {
					-ms-overflow-style: none;
					/* IE and Edge */
					scrollbar-width: none;

					/* Firefox */
					&::-webkit-scrollbar {
						width: 0;
						height: 0;
						background-color: transparent;
					}
				}



				.left-item {
					margin: 20rpx 60rpx;
				}

				.is-show {
					color: #eee;
				}

				.active_item {
					color: #007cff;
				}
			}
		}
	}

	:deep(.uni-popup) {
		z-index: 999;
	}
</style>